<template>
	<view>
		<!-- 评论输入区域 -->
		<view class="write-comment">
			<view class="input-container" @click="handleCommentInput">
				<!-- 用户头像 -->
				<image class="avatar" mode="aspectFill" :src="profileImg"  @error="onImageError" />
				<!-- 评论输入框 -->
				<!-- 禁止输入框的鼠标事件 -->
				<input 
					placeholder="写评论" 
					style="pointer-events: none;" 
					class="textarea"
				/>
			</view>
		</view><!-- write-comment -->
	</view>
</template>

<script>
export default {
	name: "write-comment-xhd", // 组件名称
	props: {
		userAvatar: {
			type: String,
			default: '../../static/img/default-avatar.jpeg' // 默认头像路径
		},
	},
	data() {
		return {
			profileImg:this.userAvatar,
			 defaultProfileImg: '/static/img/default-avatar.jpeg',
		};
	},
	watch: {},
	methods: {
		handleCommentInput() {
			// 触发打开放送面板的事件
			this.$emit('openSendPanel'); // 发出事件以打开发送评论面板
		},
		// 处理图片加载失败的情况
		onImageError(event) {
		    this.profileImg = this.defaultProfileImg; // 图片加载失败时设置为默认图片
		 },
	}
}
</script>

<style lang="scss">
/* 底部样式 */
.whole {
	width: 100%; /* 宽度占满100% */
	height: 100%; /* 高度占满100% */
}

.write-comment {
	padding-top: 10px; /* 上外边距 */
	
	.input-container {
		display: flex; /* 使用 Flexbox 布局 */
		align-items: center; /* 垂直居中对齐 */
		justify-content: space-around; /* 水平分布，子元素之间均匀分布 */
		background-color: #fff; /* 输入区域背景色 */
		border-radius: 24px; /* 圆角效果 */
		border: 1px solid #ddd; /* 边框颜色 */
		transition: border-color 0.3s; /* 边框颜色过渡效果 */
		cursor: pointer; /* 鼠标悬停时显示为可点击 */
		
		.avatar {
			width: 50px; /* 头像宽度 */
			height: 50px; /* 头像高度 */
			border-radius: 50%; /* 圆形头像 */
			margin-right: 10rpx; /* 头像与输入框之间的右边距 */
		}
		
		.textarea {
			flex: 1; /* 输入框占据剩余空间 */
			border: none; /* 去掉默认边框 */
			outline: none; /* 去掉默认轮廓 */
			padding: 10px; /* 内边距 */
			font-size: 16px; /* 字体大小 */
			color: #333; /* 字体颜色 */
		} 
	}
}
</style>
